<template>
  <div class="outer">
    <Tap title="美食">
      <template #content="{ msg,test }">
        <dl class="list">
          <dd v-for="(list, index) in msg" :key="index">{{ list }}</dd>
        </dl>
         <p>{{test}}</p>
      </template>
    </Tap>
    <Tap :title="tapData.title">
      <template #content="{ msg ,test}">
        <ul class="list">
          <li v-for="(list, index) in msg" :key="index">{{ list }}</li>
        </ul>
         <p>{{test}}</p>
      </template>
    </Tap>
    <Tap title="电影">
      <template #content="{ msg ,test}">
        <ol class="list">
          <li v-for="(list, index) in msg" :key="index">{{ list }}</li>
        </ol>
        <p>{{test}}</p>
      </template>
    </Tap>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import Tap from "./Tap";
export default {
  name: "app",
  components: {
    Tap,
  },
  data() {
    return {
      tapData: {
        id: uuidv4(),
        title: "游戏",
        list: ["奥日与萤火意志", "塞尔达旷野之息", "异度之刃2", "马里奥奥德赛"],
      },
    };
  },
};
</script>

<style scoped>
.outer {
  background-color: rgb(207, 255, 220);
  display: flex;
  width: 800px;
  justify-content: space-between;
}
.list {
  margin-left: -40px;
}
</style>